<template>
	<div>
		<ul class="list">
			<li @click="one" :class="{'light':comA==true}">盘点单</li>
			<li @click="two" :class="{'light':comB==true}">报损单</li>
		</ul>
		<one v-show="comA"></one>
		<two v-show="comB"></two>
	</div>
</template>

<script>
	import one from "./one.vue"
	import two from "./two.vue"
	export default{
		name:"tabchange",
		components:{
			one,
			two
		},
		data(){
			return{
				comA:true,
				comB:false,
			}
		},
		methods:{
			one(){
				this.comA=true
				this.comB=false
				
			},
			two(){
				this.comA=false
				this.comB=true	
			},
		
		},
		
	}
</script>

<style scoped="scoped">
	ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	.list{
		display:flex;
		width:100%;
		padding-top:5px;
		padding-bottom:5px;
	}
	.list li{
		width:50%;
		text-align: center;
		border-bottom:1px solid lightblue;
	}
	.light{
		background-color: lightblue;
		color:white;
	}
</style>
